<template>
	<view>
		<!-- 評論 -->
		<view class="comment-area u-f-ac fast">
			<view @tap="focus" class="u-f1 text-over input">{{commentText ? commentText : propCommentText}}</view>
			<view v-if="opts" class="opts u-f-ac u-f-jsb" :style="{
				marginBottom: 0,
				height: 'auto'
			}">
				<part-icon @iconTap="changeLike" :num="workInfo.statistic.like" :iconClasses="likeInconClasses" />
				<part-icon @iconTap="openShare" desc="分享" :iconClasses="['iconfenxiang']" />
			</view>
		</view>
		<!-- 正在评论狀態 -->
		<view @tap="blur" v-if="comment.isComment" class="mask comment">
			<view class="comment-area u-f-ac commentting fast">
				<textarea :show-confirm-bar="false" :adjust-position="adjustPosition" :cursor-spacing='200' fixed="true" :value="commentText"
				 type="text" focus :maxlength="200" :placeholder="currentTextAreaPlace" @focus="focus" @input="input">

				</textarea>
				<view class="u-f">

					<text @tap="submit" :class="{
						'can-submit':lastFontNum < 200 && lastFontNum >= 0
					}">发送</text>
					{{ lastFontNum }}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import partIcon from "@/components/common/part/part-icon.vue";
	export default {
		components: {
			partIcon
		},
		props: {
			workInfo:Object,
			opts: Boolean,
			likeInconClasses:Array,
			propCommentText: {
				type: String,
				default: '说点什么吧～'
			},
			textAreaPlace: {
				type: String,
				default: ''
			},
			adjustPosition: {
				type: Boolean,
				default: true
			}
		},
		computed:{
			lastFontNum (){
				return this.commentText.length > 200 ? this.commentText.length : 200 - this.commentText.length
			},
			currentTextAreaPlace(){
				if(this.comment.isRev){
					return '回复@'+this.textAreaPlace
				}else {
					return '说点什么吧'
				}
			}
		},
		data() {
			return {
				commentText: '',
				comment: {
					isComment: false,
					isRev:false
				}
			};
		},
		mounted() {
			if(this.propCommentText){
				this.comment.isRev = true;
			}
		},
		methods: {
			changeLike(){
				this.$emit('changeLike')
			},
			openShare(){
				this.$emit('openShare')
			},
			// 評論
			focus() {
				this.comment.isComment = true;
			},
			blur() {
				this.$emit('blur')
				this.comment.isComment = false;
			},
			input(e) {
				this.commentText = e.detail.value
			},
			// api 添加評論
			async submit() {
				if (!this.commentText) {
					return uni.showToast({
						title: '请输入你要发送的消息~',
						icon: 'none'
					});
				}
				// api 保存评论
				
				this.$emit('submit',this.commentText)
				// this.list.push(this.$chat.__format(result, {
				// 	type: "chatdetail", // 转化类型
				// 	olddata: this.list,
				// 	isme: true
				// }));
				// this.pageToBottom();
			}
		}
	}
</script>

<style lang="scss">
	// 发送框
	.comment-area {
		&.commentting {
			position: absolute;
			background-color: rgba(247, 247, 247, 1);
			padding-top: 26upx;

			>textarea {
				background-color: #fff;
				width: 576upx;
				height: 165upx;
				background: rgba(255, 255, 255, 1);
				border-radius: 4upx;
				padding: 18upx 22upx;
				margin-right: 24upx;
			}

			>view {
				color: #B3B3B3;
				font-size: 22upx;
				height: 200upx;
				flex-direction: column-reverse;

				text {
					font-size: 32upx;

					&.can-submit {
						color: $a1;
					}
				}

				&:before {
					content: '';
				}
			}
		}

		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 11upx 20upx;
		background: #FFFFFF;
		box-shadow:0px -2upx 15upx 0upx rgba(0, 0, 0, 0.04);
		.opts {
			width: 265upx;
			justify-content: space-around;
		}
		>.input {
			padding: 18upx 22upx;
			width: 394upx;
			line-height: 40upx;
			color: #B3B3B3;
			background: rgba(247, 247, 247, 1);
			border-radius: 36upx;
		}
	}
</style>
